<template>
	<view>
		<view class="con title">
			<text>新鲜事</text>
			<navigator url="/pages/new/addNews/addNews"><text class="iconfont icon-hao"></text></navigator>
		</view>
		<view class="con content" v-for="item in list" :key="item.id">
			<view class="news">
				<view><image :src="item.avatarurl"></image></view>
				<view>
					<view>
						<text>{{ item.username }}</text>
						<text>{{ item.create_time | format }}</text>
					</view>
					<view>
						<view>{{ item.title }}</view>
						<view>
							<view :key="value.img_id" v-for="value in item.imagesList"><image style="width: 190rpx;height: 190rpx;" :src="value.img_url"></image></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popupError" type="message"><uni-popup-message type="error" message="查询失败" :duration="1000"></uni-popup-message></uni-popup>
		<uni-popup ref="popupSuccess" type="message"><uni-popup-message type="success" message="查询成功" :duration="1000"></uni-popup-message></uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: []
		};
	},
	filters: {
		format(value) {
			let date = new Date(value);
			let hour = date.getHours();
			let minutes = date.getMinutes();
			let second = date.getSeconds();
			return (hour < 10 ? '0' + hour : hour) + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (second < 10 ? '0' + second : second);
		}
	},
	methods: {
		async getNew() {
			const { data: res } = await this.$http({
				url: '/newthing/findAllNewThing'
			});
			// console.log(res);
			if (res.code != 200) this.$refs.popupError.open();
			this.$refs.popupSuccess.open();
			this.list = res.data;
		}
	},
	created() {
		this.getNew();
	}
};
</script>

<style lang="less">
@import url('@/static/font/iconfont.css');
.con {
	width: 690rpx;
	margin: 0 auto;
}
.title {
	display: flex;
	justify-content: space-between;
	font-size: 44rpx;
	height: 144rpx;
	align-items: center;
	font-weight: bold;
	margin-bottom: 24rpx;
}
.content {
	margin-bottom: 120rpx;
	.news {
		display: flex;
		margin-bottom: 40rpx;
		> view:first-child {
			width: 80rpx;
			height: 80rpx;
			border-radius: 40rpx;
			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 40rpx;
			}
		}
		> view:last-child {
			padding-left: 20rpx;
			> view:first-child {
				width: 590rpx;
				height: 80rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				> text:first-child {
					font-size: 32rpx;
					font-weight: bold;
				}
				> text:last-child {
					font-size: 24rpx;
					color: #b4b3b3;
				}
			}
			> view:last-child {
				display: flex;
				flex-direction: column;
				> view:first-child {
					width: 590rpx;
					font-size: 28rpx;
					color: #b4b3b3;
					line-height: 50rpx;
					margin-bottom: 20rpx;
				}
				> view:last-child {
					display: flex;
					justify-content: space-between;
				}
			}
		}
	}
}
</style>
